<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery文本编辑插件wangEditor</title>


<!--引入 fontawesom-4.2.0-->
<link rel="stylesheet" type="text/css" href="fontawesome-4.2.0/css/font-awesome.min.css">
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="fontawesome-4.2.0/css/font-awesome-ie7.min.css">
<![endif]-->

<!--引入wangEditor.css-->
<link rel="stylesheet" type="text/css" href="css/wangEditor-1.1.0-min.css">

<style type="text/css">
body{
	padding: 0px 10px 0px 10px;
	color:#333333;
}
</style>

</head>
<body>

<h1>wangEditor demo</h1>

<div id='txtDiv' style='border:1px solid #cccccc; height:240px;'>
	<p>请输入内容...</p>
</div>

<div style='margin-top:10px;'>
	<button id='btnHtml'>查看html</button>
	<button id='btnText'>查看text</button>
	<button id='btnHide'>隐藏</button>
	<textarea id='textarea' style='width:100%; height:100px; margin-top:10px;'></textarea>
</div>

<!--引入 jquery.js-->
<script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>

<!--引入 wangEditor.js-->
<script type="text/javascript" src='js/wangEditor-1.1.0-min.js'></script>
<script type="text/javascript">
	$(function(){
		$('#spanTime').text((new Date()).toString());

		//一句话，即可把一个div 变为一个富文本框！o(∩_∩)o 
		var $editor = $('#txtDiv').wangEditor();

		//显示 html / text
		var $textarea = $('#textarea'),
			$btnHtml = $('#btnHtml'),
			$btnText = $('#btnText'),
			$btnHide = $('#btnHide');
		$textarea.hide();
		$btnHtml.click(function(){
			$textarea.show();
			$textarea.val( $editor.html() );
		});
		$btnText.click(function(){
			$textarea.show();
			$textarea.val( $editor.text() );
		});
		$btnHide.click(function(){
			$textarea.hide();
		});
	});
</script>


</body>
</html>